import React, { useEffect, useState } from 'react';
import { Card, Spin, Select, Tabs } from 'antd';
import { useDispatch, useSelector } from 'react-redux';
import { fetchModels } from './modelSlice';
import { RootState, AppDispatch } from '@/store';

const { Option } = Select;
const { TabPane } = Tabs;

const ModelComparisonPage: React.FC = () => {
  const dispatch = useDispatch<AppDispatch>();
  const { models, loading } = useSelector((state: RootState) => state.models);
  const [timeRange, setTimeRange] = useState('week');

  useEffect(() => {
    dispatch(fetchModels());
    dispatch(fetchModelComparisons(timeRange));
  }, [dispatch, timeRange]);

  if (loading) {
    return (
      <div style={{ textAlign: 'center', padding: '100px 0' }}>
        <Spin size="large" />
      </div>
    );
  }

  return (
    <Card title="模型性能对比分析">
      <div style={{ marginBottom: 24 }}>
        <Select
          value={timeRange}
          onChange={setTimeRange}
          style={{ width: 200 }}
        >
          <Option value="day">今日</Option>
          <Option value="week">本周</Option>
          <Option value="month">本月</Option>
          <Option value="quarter">本季度</Option>
        </Select>
      </div>

      <Tabs defaultActiveKey="accuracy">
        <TabPane tab="准确率对比" key="accuracy">
          <div style={{ height: 400, display: 'flex', alignItems: 'center', justifyContent: 'center', border: '1px dashed #e8e8e8' }}>
            <p>准确率对比图表（此处将显示图表）</p>
          </div>
        </TabPane>
        
        <TabPane tab="速度对比" key="speed">
          <div style={{ height: 400, display: 'flex', alignItems: 'center', justifyContent: 'center', border: '1px dashed #e8e8e8' }}>
            <p>处理速度对比图表（此处将显示图表）</p>
          </div>
        </TabPane>
        
        <TabPane tab="详细指标" key="details">
          <div style={{ height: 400, display: 'flex', alignItems: 'center', justifyContent: 'center', border: '1px dashed #e8e8e8' }}>
            <p>详细性能指标表格（此处将显示表格）</p>
          </div>
        </TabPane>
      </Tabs>

      <div style={{ marginTop: 32 }}>
        <h3>模型列表</h3>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(300px, 1fr))', gap: 16, marginTop: 16 }}>
          {models.map(model => (
            <Card 
              key={model.id} 
              title={model.name}
              extra={model.isDefault ? <span style={{ color: '#1890ff' }}>默认模型</span> : null}
            >
              <p><strong>描述：</strong>{model.description}</p>
              <p><strong>准确率：</strong>{(model.accuracy * 100).toFixed(1)}%</p>
              <p><strong>处理速度：</strong>{model.speed} 条/秒</p>
              <p><strong>支持批量：</strong>{model.supportBatch ? '是' : '否'}</p>
              <p><strong>更新时间：</strong>{model.updatedAt}</p>
            </Card>
          ))}
        </div>
      </div>
    </Card>
  );
};

export default ModelComparisonPage;

function fetchModelComparisons(timeRange: string): any {
  throw new Error('Function not implemented.');
}
    